import React, { useState } from 'react';
import { StyleSheet, Text, Button, View, Image, ImageBackground, ScrollView, TouchableOpacity } from 'react-native';

const T = ({children,...rest}) => {
  return (
    <Text {...rest}>
        <Text>{children}</Text>
        <Text style={{color:'#7cfc00'}}>我毫无疑问</Text>
    </Text>
  )
}

const ImgBG = ({children,style,source}) => {
  return (
    <View style={style}>
      <Image style={{...style,position:'absolute',zIndex:-1}} source={source} />
      {children}
    </View>
    
  )
}

const BTN = () => {
    return (<TouchableOpacity style={{width:100,height:20,backgroundColor:'#0099ff',alignItems:'center',justifyContent:'center',borderRadius:5}}>
      <Text style={{color:'#fff'}}>按钮</Text>
    </TouchableOpacity>)
}

export default App = () => {
  const uri = ''


  return (
    <View style={styles.layout}>
      <ScrollView>

      <Text style={styles.text}>
        <Text>复读机上课</Text>
        <Text style={{color:'#7cfc00'}}>我毫无疑问</Text>
      </Text>
      <Image style={{width:200,height:200,resizeMode:'cover'}} source={require('./public/images/emma.jpg')} />

      <ImageBackground 
        source={require('./assets/favicon.png')}
        style={{width:300,height:200}}
      >
        <T children={'是的福克斯'}></T>
      </ImageBackground>
      
      <BTN />

      <Image style={{width:200,height:200}} source={{
        uri:'https://www.lovelive-anime.jp/lovelive/jp/book/2023/03/02/1004/DS2aRrD8ntexVy3J/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96%EF%BC%81%E8%99%B9%E3%83%B6%E5%92%B2%E5%AD%A6%E5%9C%92%E3%82%B9%E3%82%AF%E3%83%BC%E3%83%AB%E3%82%A2%E3%82%A4%E3%83%89%E3%83%AB%E5%90%8C%E5%A5%BD%E4%BC%9A%E3%80%80%E3%81%AB%E3%81%98%E3%81%84%E3%82%8DTeaTime_%E8%A1%A8%E7%B4%99.jpeg?_=1679467680'
      }} />

      <Image
          style={{width: 66, height: 58}}
          source={{uri}}
      />

      <Button
        onPress={()=>{}}
        title="按钮"
        color="#841584"
      />

      <ImgBG style={{width:200,height:100}} source={require('./assets/favicon.png')} >
        <Text>进空间看久了</Text>
      </ImgBG>

              
      </ScrollView>

    </View>
  );
}

const styles = StyleSheet.create({
  layout:{
    flex:1,
    backgroundColor:'#785354',
  },
  text: {
    color:'#fff'
  }

});
